<template>
    <view>
        <!--顶部区域-->
        <view class="smart-page-head">
        <view class="smart-page-head-title">text 文本组件</view>
        </view>
        <view class="smart-padding-wrap">
        <view class="text-box" scroll-y="true">
            <text>{{ text }}</text>
        </view>
		<button type="primary"  :disabled="!canAdd" @click="add">add line</button>
		<button type="warn"  :disabled="!canRemove" @click="remove">remove line</button>
    </view>
	</view>
	
</template>

<script>
import { setTransitionHooks } from 'vue';

    export default {
        data() {
            return {
				texts:[
					'HBuilder, 400万开发者选择的IDE',
					'HBuilderX, 轻巧、极速，极客编辑器',
					'uni-app, 终极跨平台方案',
					'HBuilderX, 400万开发者选择的IDE',
					'HBuilderX, 轻巧、极速，极客编辑器',
					'uni-app, 终极跨平台方案',
					'HBuilderX, 400万开发者选择的IDE',
					'HBuilderX, 轻巧、极速，极客编辑器',
					'uni-app, 终极跨平台方案',
					'......'
				],
				text:'',
				canAdd: true,
				canRemove: false,
				extraLine:[]
                
            };
        },
		methods: {
			add: function(e){
				this.extraLine.push(this.texts[this.extraLine.length % 12]);
				this.text = this.extraLine.join('\n');
				this.canAdd = this.extraLine.length < 12;
				this.canRemove = this.extraLine.length > 0;
			},
			remove: function(e)
			{
				if (this.extraLine.length > 0){
					this.extraLine.pop();
					this.text = this.extraLine.join('\n');
					this.canAdd = this.extraLine.length < 12;
					this.canRemove = this.extraLine.length > 0;
				}
			}
		}
    };
</script>

<style>

</style>